<script setup>
        import { ref } from 'vue';
        import { ElMessage,ElMessageBox } from 'element-plus'
        import AddDialog from '@/components/AddDialog.vue'
const AddDialogRef = ref(null)
                const openAddDialog = () => {
                    AddDialogRef.value.openDialog()
                }
                import EditDialog from '@/components/EditDialog.vue'
const EditDialogRef = ref(null)
                const openEditDialog = (row) => {
                    EditDialogRef.value.openDialog()
                }
                const searchForm = reactive({name: '',age: '',});import getTableListApi from '@/api/table';
const tableData = ref([]);
        import CommonPagination from "@/components/pagination.vue";
        const pagination = ref({
            page: 1,
            size: 10,
            total: 0
        })
        const getTableData = () => {
            let params = searchForm;
            params.pagination = pagination.value;
            getTableListApi(params).then(res => {
                tableData.value = res.data
                pagination.value.total = res.pagination.total
            })
        }
        
        const handleSearch = () => {
            pagination.value.page = 1
            getTableData()
        }
        
        const handleReset = () => {
            getTableData()
        }
        
        onMounted(() => {
            getTableData()
        })
        </script><template><el-main>
        <div class="toolbar">
            <el-button type="primary" @click="handleAdd">Add</el-button><el-button type="danger" @click="handleDelete">Delete</el-button>
            
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            
                <el-form-item label="Name">
                    <el-input v-model="searchForm.name"></el-input>
                </el-form-item>
                
            <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="resetSearch">重置</el-button>
            </el-form-item>
        </el-form>
        
        </div>
        
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="selection" width="55"></el-table-column><el-table-column prop="name" label="Name"></el-table-column><el-table-column prop="age" label="Age"></el-table-column><el-table-column label="操作">
            <template #default="{row}"><el-button type="primary" size="mini" @click="handleEdit(row)">Edit</el-button><el-button type="danger" size="mini" @click="handleDelete(row)">Delete</el-button></template>
        </el-table-column>
        </el-table>
        
        <common-pagination :pagination="pagination" @fetch-list="getTableData"></common-pagination>
        <AddDialog ref="AddDialogRef"></AddDialog>
<EditDialog ref="EditDialogRef"></EditDialog>
</el-main></template>